<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    :destroy-on-close="close_modal_destroy"
    :close-on-click-modal="close_modal"
    @close="handleCancel"
    width="400px"
    append-to-body
  >
    <el-form  ref="systemMessageDialogForm" :rules="rules" :model="form" :inline="true" status-icon size="small" label-position="right">
      <el-form-item label="昵称" prop="userName" label-width="100px" v-if="!editShow">
        <el-col :span="24">
          <el-input v-model="form.userName" ></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="原密码" prop="password" label-width="100px" v-if="!editShow">
        <el-col :span="29">
          <el-input v-model="form.password" type="password"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="新密码" prop="newPassword" label-width="100px" v-if="!editShow">
        <el-col :span="24">
          <el-input v-model="form.newPassword" type="password"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="确认密码" prop="confirmPassword" label-width="100px" v-if="!editShow">
        <el-col :span="24">
          <el-input v-model="form.confirmPassword" type="password"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="个人介绍" prop="introduction" label-width="80px" v-if="editShow">
        <el-input v-model="introduction" type="textarea" :rows="4" :placeholder="this.introduction" style="width: 350px" clearable ></el-input>
      </el-form-item>
      <div style="text-align: right">
        <el-button @click="handleCancel">取 消</el-button>
        <el-button type="primary"  @click="handleSubmit" >修改</el-button>
      </div>
    </el-form>
  </el-dialog>
</template>

<script>
import * as PersonApp from '@/api/person'
export default {
  name: "systemMessageDialog",
  data() {
    const checkConfirmPassword = (rule, value, callback) => {
      if (this.form.newPassword !== value) {
        callback(new Error('两次密码不一致'))
      } else {
        callback()
      }
    }
    const checkPassword = (rule, value, callback) => {
      if (!/^.{6,18}$/.test(value)) {
        callback(new Error('请输入6到12位的字符'))
      } else {
        callback()
      }
    }
    return {
      form: {},
      introduction: undefined,
      title: '修改系统个人信息',
      visible: false,
      editShow: false,
      close_modal_destroy: true,
      close_modal: false,
      rules: {
        userName: [
          {required: true, trigger: 'blur', message: '昵称不能为空'}
        ],
        password: [
          {required: true, trigger: 'blur', message: '原密码不能为空'}
        ],
        newPassword: [
          {required: true, trigger: 'blur', message: '新密码不能为空'},{ validator: checkPassword, trigger: 'blur' }
        ],
        confirmPassword: [
          {required: true, trigger: 'blur', message: '确认密码不能为空'},{ validator: checkConfirmPassword, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    add(userName) {
      this.title = '修改系统个人信息'
      this.$nextTick(() => {
        this.$refs.systemMessageDialogForm.resetFields()
      })

      this.editShow = false
      this.form = Object.assign({}, this.form, {userName: userName})
      this.visible = true
    },
    edit(introduce) {
      this.title = '修改个人介绍'
      this.$nextTick(() => {
        this.$refs.systemMessageDialogForm.resetFields()
      })

      this.introduction = introduce
      this.visible = true
      this.editShow = true
    },
    handleCancel() {
      this.close()
    },
    close() {
      this.$emit('close')
      this.visible = false
      this.form = {}
      this.introduction = undefined
    },
    async handleSubmit() {
      if (this.editShow==false) {
        await PersonApp.updateSystemPersonDetail(this.form).then(res => {
          if (res.body.data)
            this.$message.success("密码修改成功")
          else
            this.$message.error("密码修改失败")
        })
      } else {
        await PersonApp.updateIntroduce(this.introduction).then(res => {
          if (res.body.data)
            this.$message.success("个人介绍修改成功")
          else
            this.$message.error("个人介绍修改失败")
        })
      }
      this.$emit('ok')
      this.close()
    },

  }
}
</script>

<style scoped>

</style>
